<%@ page contentType = "text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page session="false" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/resources/knit/css/knit.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="/resources/knit/js/html5shiv.js"></script>
    <script src="/resources/knit/js/respond.min.js"></script>
  <![endif]-->
<link rel="stylesheet" href="/resources/jqGrid/css/jquery-ui-1.9.2.custom.min.css"/>  
  <style>
    .ui-resizable-helper { border: 1px dotted #00F; }
  </style>
</head>
<body onresize="resizetable();">
<c:set var="editable" value="${rm.tableCount == 1 && plan ne 'Y'}"/>

<div style="position:absolute;top:0;padding-bottom:35px">
<script>
var pkIdx = {};
var pkc='';
</script>
<c:forEach var="pkc" items="${pk}">
	<script>
		pkc = pkc + ';${pkc}'; 
	</script>
</c:forEach>
<div id="thead" style="width:100%;height:25px;position:fixed;top:0px;left:0px;overflow:hidden;">
<div style="width:${fn:length(rm.columns)*120+1000}px;margin:0;">
			<c:forEach var="column" items="${rm.columns}" varStatus="v">
			<script>
				if(pkc.indexOf('${column}')>-1){
					pkIdx[${v.index}] = '${column}';	
				}else{
					pkIdx[${v.index}] = '';
				}
			</script>
				<div id="col${v.index}" class="res" style="display:block;position:relative;width:111px;text-overflow:ellipsis;overflow:hidden;border-right:1px solid #dddddd;float:left;height:25px;background-color:#eeeeee;text-align:center;font-weight:bold">${column}</div>
				<!-- <div style="z-index:999999;position: absolute; width: 10px; height: 25px; top: -5px; right: -11px; cursor: w-resize;"></div> -->
			</c:forEach>
</div>
</div>
<div id="tbody" style="width:100%;height:300px;position:fixed;margin-top:25px;left:0px;overflow:scroll">
<table style="width:0px;">
<tbody>
<c:forEach var="row" items="${rm.results}" varStatus="r">
<tr>
	<c:forEach var="col" items="${row}" varStatus="c">
	<%-- <td style="max-width:200px;text-overflow:ellipsis;overflow:hidden">${col}</td> --%>
	<td data_c="${c.index}" data_r="${r.index}" style="border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;padding:2px 5px;"><div style="width:100px;text-overflow:ellipsis;overflow:hidden" class="col${c.index}" >
	<a href="javascript:openEdit(${c.index},${r.index});">${col}</a>
	</div>
	
	</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<form name="modify" action="/modify" method="post">
<div style="width:100%;height:0">
<div id="deemed" style="position:fixed;top:0;left:auto;margin:0px !important;width:100%;height:100%z;-index:999998;display:none;height:100%;alpha:30%;opacity:0.5;background-color:#aaaaaa"></div>
<div id="edit" class="alert alert-success" style="position:fixed;top:0;margin:0px auto !important;width:500px;z-index:999999;display:none">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true" onclick="closeEdit();">&times;</button>
  <textarea class="form-control" rows="3" id="editor" name="mval"></textarea>
  <input type="hidden" name="mcol">
  <input type="hidden" name="columns">
  <input type="hidden" name="values">
  <input name="dbid" value="${dbid}" type="hidden">
  <input name="table" value="${table}" type="hidden">
  <input name="isQuery" value="${isQuery}" type="hidden">
  <p style="margin-top:20px;">
  <button type="button" class="btn btn_warning" onclick="closeEdit();">취소</button>
  <button type="button" class="btn btn-primary" onclick="document.modify.submit();">수정</button>
</p>
</div>
</div>
</form>
<c:if test="${isQuery ne 'Y' && plan ne 'Y'}">
<div style="position:fixed;height:35px;bottom:0;width:100%;background:#dddddd;padding:6px 0 0 10px;border-top:1px solid #888888;">
<strong style="font:bold">${start+1} ~ ${end} &nbsp&nbsp&nbsp total ${total} rows.</strong>
<button type="button" class="btn btn-primary btn-sm <c:if test="${end == total}">disabled</c:if>" style="float:right;margin-right:20px;" onclick="next();">next 100</button> 
<button type="button" class="btn btn-primary btn-sm <c:if test="${start == 0}">disabled</c:if>" style="float:right;margin-right:10px;" onclick="prev();">prev 100</button>
</div>
</c:if>
<script src="/resources/knit/js/jquery.js"></script>
<script src="/resources/jqGrid/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

<form name="contents" action="/contents">
	<input name="dbid" value="${dbid}" type="hidden">
	<input name="table" value="${table}" type="hidden">
	<input name="start" value="" type="hidden">
</form>


<c:if test="${not empty count}">
실행결과 : ${count }개
</c:if>
<c:if test="${not empty error}">
<div class="alert alert-danger" style="margin:10px;">
  <strong>${error}   </strong>
	<c:if test="${not empty code }">
	<a href = "https://www.google.co.kr/#newwindow=1&q=${code}" class="btn btn-warning" style="margin-left:10px">${code } 검색</a>
	</c:if>
</div>
</c:if>

<c:if test="${editable}">
<script>
function openEdit(col, row){
	$('#editor').html(getContent(col,row));
	var cols = '';
	var vals = '';
	for(var i in pkIdx){
		if(pkIdx[i] != ''){
			cols = cols + pkIdx[i] + ',';
			vals = vals + getContent(i, row) + ',';
		}
	}
	
	if(cols == ''){
		alert('PK가 없는데요.')
		return;
	}
	document.modify.mcol.value = $('#col' + col).text();
	document.modify.columns.value = cols;
	document.modify.values.value = vals;
	
	$('#deemed').show();
	$('#edit').slideDown();
}

function getContent(col, row){
	return $('td[data_c=' + col + '][data_r=' +  row + '] > div > a').text();
}
function closeEdit(){
	$('#deemed').hide();
	$('#edit').slideUp();
}
</script>
</c:if>
<c:if test="${not editable}">
<script>
function openEdit(col, row){
}
</script>
</c:if>
<c:if test="${isQuery eq 'Y' }">
<script>
var margin = 0;
</script>
</c:if>
<c:if test="${not (isQuery eq 'Y')}">
<script>
var margin = 60;
</script>
</c:if>
<script>
function next(){
	var start = ${start} + 100;
	document.contents.start.value = start;
	document.contents.submit();
	document.href = '/contents?dbid=${dbid}&table=${table}&start=' + start;
}

function prev(){
	var start = ${start} - 100;
	document.contents.start.value = start;
	document.contents.submit();
	document.href = '/contents?dbid=${dbid}&table=${table}&start=' + start;
}

$('#tbody').scroll(function(e){
	$('#thead').scrollLeft(e.target.scrollLeft);
});

$("div.res").resizable( {minHeight: 25, maxHeight:25, stop: function(e, ui) {
	var t = $(e.target);
	var id = t.attr('id');
	var width = t.width() -10;
	$('tbody tr td div.'+id).width(width);
	var thead = $('#thead>div');
	thead.width(thead.width()+1000);
}});

function resizetable(){
	
	$('#tbody').css('height', parent.getResultHeight()-margin);
}
resizetable();
</script>
</body>
</html>
